<style>
</style>

<template>
<Row class="layout-content-body" id="print-pdf">
    <Card>
     <p slot="title">{{$route.params.dept.title}}</p> 
    <Row v-show="addFlag">
        <Card>
            <p slot="title">技术人员数据</p>
            <div slot="extra">
                <Button type="primary" size="small" @click="add2tmp">暂存</Button>
                <Button type="ghost" size="small" style="margin-left: 8px">重置</Button>
            </div>
            <Form ref="formSales" :model="formItem" :label-width="80" label-position="left" :rules="ruleValidate">
                <Row :gutter="20">
                    <i-col span="8">
                        <Form-item label="姓名" prop="Name">
                            <Input v-model="formItem.Name"></Input>
                        </Form-item>
                    </i-col>

                    <i-col span="8">
                        <Form-item label="出生年月">
                            <!-- <Input v-model="formItem.Birth"></Input> -->
                            <DatePicker v-model="formItem.Birth" :clearable="false" type="month" placeholder="请选择年月"></DatePicker>
                        </Form-item>
                    </i-col>
                    <i-col span="8">
                        <Form-item label="性别">
                            <!-- <Input v-model="formItem.Sex"></Input> -->
                            <Select v-model="formItem.Sex" style="width:100px">
                                <Option v-for="item in sexArray" :value="item.value" :key="item.value">{{ item.name }}</Option>
                            </Select>
                        </Form-item>
                    </i-col>
                </Row>

                <Row :gutter="20">
                    <i-col span="8">
                        <Form-item label="毕业院校及专业" prop="Biyeyuanxiaojizhuanye">
                            <Input v-model="formItem.Biyeyuanxiaojizhuanye"></Input>
                        </Form-item>
                    </i-col>
                    <i-col span="8">
                        <Form-item label="学历">
                            <!-- <Input v-model="formItem.Xueli"></Input> -->
                            <Select v-model="formItem.Xueli" style="width:100px">
                                <Option v-for="item in xueliArray" :value="item.value" :key="item.value">{{ item.name }}</Option>
                            </Select>
                        </Form-item>
                    </i-col>
                    <i-col span="8">
                        <Form-item label="学历获得">
                            <!-- <Input v-model="formItem.Xuelihuode"></Input> -->
                            <Select v-model="formItem.Xuelihuode" style="width:100px">
                                <Option v-for="item in xuelihuodeArray" :value="item.value" :key="item.value">{{ item.name }}</Option>
                            </Select>
                        </Form-item>
                    </i-col>

                </Row>
                <Row :gutter="20">

                    <i-col span="8">
                        <Form-item label="参加工作时间及单位" prop="Gongzuoshijiandanwei">
                            <Input v-model="formItem.Gongzuoshijiandanwei"></Input>
                        </Form-item>
                    </i-col>
                    <i-col span="8">
                        <Form-item label="参加技术工作时间及单位" prop="Jishugongzuoshijiandanwei">
                            <Input v-model="formItem.Jishugongzuoshijiandanwei"></Input>
                        </Form-item>
                    </i-col>
                    <i-col span="8">
                        <Form-item label="毕业时间">
                            <!-- <Input v-model="formItem.Biyeshijian"></Input> -->
                            <DatePicker v-model="formItem.Biyeshijian" type="month" :clearable="false" placeholder="请选择年月"></DatePicker>
                        </Form-item>
                    </i-col>
                </Row>

                <Row :gutter="20">
                    <i-col span="8">
                        <Form-item label="现从事专业" prop="Xianzhuanye">
                            <Input v-model="formItem.Xianzhuanye"></Input>
                        </Form-item>
                    </i-col>
                    <i-col span="8">
                        <Form-item label="取得专业技术资格及时间" prop="Qudejishuzigeshijian">
                            <Input v-model="formItem.Qudejishuzigeshijian"></Input>
                        </Form-item>
                    </i-col>
                    <i-col span="8">
                        <Form-item label="是否具有鉴定资格">
                            <!-- <Input v-model="formItem.Jaindingzige"></Input> -->
                            <Select v-model="formItem.Jaindingzige" style="width:100px">
                                <Option v-for="item in boolArray" :value="item.value" :key="item.value">{{ item.name }}</Option>
                            </Select>
                        </Form-item>
                    </i-col>
                </Row>
                <Row :gutter="20">
                    <i-col span="8">
                        <Form-item label="现所在单位" prop="Suozaibumen">
                            <Input v-model="formItem.Suozaibumen"></Input>
                        </Form-item>
                    </i-col>
                    <i-col span="8">
                        <Form-item label="是否现场勘察人员">
                            <!-- <Input v-model="formItem.Kancha"></Input> -->
                            <Select v-model="formItem.Kancha" style="width:100px">
                                <Option v-for="item in boolArray" :value="item.value" :key="item.value">{{ item.name }}</Option>
                            </Select>
                        </Form-item>
                    </i-col>
                    <i-col span="8"></i-col>
                </Row>
                <Row>

                </Row>
            </Form>
        </Card>
    </Row>
    <Row>
        <dtable :columns="columns" :dataAll="dataAll" :totals="total" saveBtn   :hover-show="true" 
         @add="add" @edit="edit" @del="del" @save="save" 
         :pageS="100">
        </dtable>
    </Row>
    </Card>
</Row>
</template>

<script>
import dtable from "@/components/table/dtable.vue"; //
import moment from "moment";
// import cust from '@/views/busy/cust'
var list = [];
var item = {};
export default {
  data() {
    return {
      loading: false, //数据刷新遮罩层
      //表格样式
      columns: [
        {
          title: "姓名",
          key: "Name",
          fixed: "left",
          width: 130,
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.Name)
            ]);
          }
        },
        {
          title: "性别",
          key: "Sex",
          width: 100,
          render: (h, { row }) => {
            return h("span", {}, row.Sex == 0 ? "男" : "女");
          }
        },
        {
          title: "出生年月",
          key: "Birth",
          width: 120,
          render: (h, { row, column, index }) => {
            return h("span", {}, moment(row.Birth).format("YYYY-MM-DD"));
          }
        },
        {
          title: "学历",
          key: "Xueli",
          width: 100,
          render: (h, { row }) => {
            let str = "";
            switch (row.Xueli) {
              case 0:
                str = "本科";
                break;
              default:
                str = "其它";
                break;
            }
            return h("span", {}, str);
          }
        },
        {
          title: "学历获得",
          key: "Xuelihuode",
          width: 100,
          render: (h, { row }) => {
            let str = "";
            switch (row.Xuelihuode) {
              case 0:
                str = "全日制";
                break;
              case 1:
                str = "函授";
                break;
              case 2:
                str = "成人";
                break;
              default:
                str = "其它";
                break;
            }
            return h("span", {}, str);
          }
        },
        {
          title: "毕业院校及专业",
          width: 150,
          key: "Biyeyuanxiaojizhuanye"
        },
        {
          title: "毕业时间",
          key: "Biyeshijian",
          width: 100,
          render: (h, { row, column, index }) => {
            return h("span", {}, moment(row.Biyeshijian).format("YYYY-MM-DD"));
          }
        },
        {
          title: "参加工作时间及单位",
          key: "Gongzuoshijiandanwei",
          width: 150
        },
        {
          title: "参加技术工作时间及单位",
          key: "Jishugongzuoshijiandanwei",
          width: 150
        },
        {
          title: "现从事专业",
          key: "Xianzhuanye",
          width: 150
        },
        {
          title: "取得专业技术资格及时间",
          key: "Qudejishuzigeshijian",
          width: 150
        },
        {
          title: "是否具有鉴定资格",
          width: 80,
          key: "Jaindingzige",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.Jaindingzige == 1 ? "是" : "否");
          }
        },
        {
          title: "现所在单位",
          width: 100,
          key: "Suozaibumen"
        },
        {
          title: "是否现场勘察人员",
          width: 80,
          key: "Kancha",
          render: (h, { row, column, index }) => {
            return h("span", {}, row.Kancha == 1 ? "是" : "否");
          }
        }
      ],
      summary: {
        Name: "合计",
        Money: 0
      },
      dataAll: [], //表格数据来源含合计
      datas: [], //表格数据来源
      formItem: {
        Id: this.$util.uuid(),
        Name: "",
        Sex: 0,
        Birth: new Date(),
        Xueli: 0,
        Xuelihuode: 0,
        Biyeyuanxiaojizhuanye: "",
        Biyeshijian: new Date(),
        Gongzuoshijiandanwei: "",
        Jishugongzuoshijiandanwei: "",
        Jaindingzige: 0,
        Xianzhuanye: "",
        Qudejishuzigeshijian: "",
        Suozaibumen: "",
        Kancha: 0,
        OperateType: 2,
        DeptId: this.$route.params.dept.id
      }, //数据编辑表单
      templete: {
        Id: this.$util.uuid(),
        Name: "",
        Sex: 0,
        Birth: new Date(),
        Xueli: 0,
        Xuelihuode: 0,
        Biyeyuanxiaojizhuanye: "",
        Biyeshijian: new Date(),
        Gongzuoshijiandanwei: "",
        Jishugongzuoshijiandanwei: "",
        Jaindingzige: 0,
        Xianzhuanye: "",
        Qudejishuzigeshijian: "",
        Suozaibumen: "",
        Kancha: 0,
        OperateType: 2,
        DeptId: this.$route.params.dept.id
      },
      formSales: {
        Id: "",
        Name: "",
        Count: 1,
        Remark: "",
        Price: 0,
        DiscountPrice: 0,
        Off: 0
      },
      ruleValidate: {
        Name: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Sex: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Birth: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Xueli: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Xuelihuode: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Biyeyuanxiaojizhuanye: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Biyeshijian: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Gongzuoshijiandanwei: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Jishugongzuoshijiandanwei: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Jaindingzige: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Xianzhuanye: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Qudejishuzigeshijian: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Qudejishuzigeshijian: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Suozaibumen: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ],
        Kancha: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ]
      }, //数据编辑表单验证规则
      addid: true, //true为修改模式，false为添加模式
      salesAd: false,
      custShow: false,
      prodShow: false,
      salesShow: false,
      recive: [],
      PercentShow: "always",
      cust: [],
      prod: [],
      total: 0,
      addFlag: false,
      sexArray: [
        {
          name: "男",
          value: 0,
          default: 1
        },
        {
          name: "女",
          value: 1,
          default: 0
        }
      ],
      xueliArray: [
        {
          name: "本科",
          value: 0,
          default: 1
        },
        {
          name: "其它",
          value: 1,
          default: 0
        }
      ],
      xuelihuodeArray: [
        {
          name: "全日制",
          value: 0,
          default: 1
        },
        {
          name: "函授",
          value: 1,
          default: 0
        },
        {
          name: "成人",
          value: 2,
          default: 0
        }
      ],
      boolArray: [
        {
          name: "是",
          value: 1,
          default: 1
        },
        {
          name: "否",
          value: 0,
          default: 0
        }
      ],
      instance: {},
      operateList: []
    };
  },
  components: {
    dtable
  },
  computed: {
    dept() {
      return this.$route.params.dept;
    }
  },
  props: {},
  watch: {},
  methods: {
    save() {
      if (this.dataAll.length) {
        this.$api.PostInstance(this.dataAll).then(res => {
          console.log(res);
          if (res.code == 0) {
            this.$router.push({
              name: "技术人员变更"
            });
          }
        });
      } else {
        this.$Message.warning("当前无数据，未做任何处理！");
      }
    },
    del(row) {
      console.log(row);
      for (let i = 0; i < this.dataAll.length; i++) {
        if (this.dataAll[i]["Id"] == row["Id"]) {
          this.$delete(this.dataAll, i);
        }
      }
    },
    add2tmp() {
      this.$refs["formSales"].validate(valid => {
        if (valid) {
          this.addFlag = false;
          this.dataAll.push(this.formItem);
          this.formItem = this.copyTemplate();
        } else {
          this.$Message.error("表单验证失败！");
        }
      });
    },
    add() {
      this.formItem = this.copyTemplate();
      this.addFlag = true;
    },
    copyTemplate() {
      let tmp = JSON.parse(JSON.stringify(this.templete));
      tmp.Id = this.$util.uuid();
      tmp.DeptId = this.$route.params.dept.id;
      if (this.$route.params.dept.edit && this.$route.params.dept.id) {
        tmp.EngineerInstanceId = this.instance.Id
      }
      return tmp;
    },
    edit(row) {
      //   console.log(row);
      this.formItem = JSON.parse(JSON.stringify(row));
      this.del(row);
      this.addFlag = true;
    }
  },
  mounted() {
    if (!this.$route.params.dept.id) {
      this.$Message.warning("数据异常，返回上级页面！");
      this.$router.push({
        name: "技术人员管理"
      });
    }

    if (this.$route.params.dept.edit && this.$route.params.dept.instanceId) {
      this.$api.GetInstanceById({Id: this.$route.params.dept.instanceId}).then( res => {
        if (res.code == 0) {
          console.log(res)
          this.instance = res.Data
        }
      })
      this.$api.GetInstanceItemByInstanceId({Id: this.$route.params.dept.instanceId}).then(res => {
        if (res.code == 0) {
          console.log(res)
          this.dataAll = res.Data
        }
      })


    }

          this.dataAll = this.$route.params.dept.rows
      console.log(this.dataAll)
      if (this.dataAll.length ) {
          for(let i = 0; i < this.dataAll.length; i++) {
              this.dataAll[i].OperateType = 2
              this.dataAll[i].EngineerId = this.dataAll[i].Id
              this.dataAll[i].Id = undefined
          }
          
      }
     console.log( this.dataAll)
  }
};
</script>
